﻿@model LuShanTea.Front.Web.Models.GoodDetailGetModel
@{
    ViewBag.Title = "产品名称详细介绍购买";
    Layout = "~/Views/Shared/_UserLayout.cshtml";
}

@section Head{
    <link href="~/common/Threelinkage/layui/css/layui.css" rel="stylesheet" />
    <link href="~/common/css/show.css" rel="stylesheet" />
    <script src="~/common/js/jqzoom.js"></script>
    <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
    <![endif]-->

    <style>
        .pack-active {
            border: 2px solid #C30 !important;
            color: #C30 !important;
            padding: 3px 5px !important;
        }

        .comment_div {
            border-bottom: 3px solid #808080;
            margin-top: 10px;
            padding-left: 15px;
            padding-bottom: 15px;
        }

        .yellow {
            color: rgb(252,217,1);
        }
    </style>
}
<!--内页样式-->
    <div class="Inside_pages">
        <!--面包屑-->
        <div class="Location_link">
            <em></em><a href="#">产品中心</a>  &lt;   <a href="~/Home/List=?categoryId=@Model.Good.CateGoriesId">@Model.Good.CatoryName</a>  &lt;   <a href="#">@(Model.Good.Name) 产品介绍</a>
        </div>
        <!--产品购买介绍样式-->
        <div class="Detailed">
            <!--产品详细介绍-->
            <div class="Details_style clearfix" id="goodsInfo">
                <div class="mod_picfold clearfix">
                    <div class="clearfix" id="detail_main_img">
                        <div class="layout_wrap preview">
                            <div id="vertical" class="bigImg">
                                <img src="http://static.amortal.top/@Model.GoodImgs[0].ThumImgSrc" alt="" id="midimg" />
                                <div style="display:none;" id="winSelector"></div>
                            </div>
                            <div class="smallImg">
                                <div class="scrollbutton smallImgUp disabled">&lt;</div>
                                <div id="imageMenu">
                                    <ul>
                                        @foreach (var goodImg in Model.GoodImgs)
                                        {
                                            <li><img src="http://static.amortal.top/@goodImg.ThumImgSrc" width="68" height="68" alt="洋妞" /></li>
                                        }

                                    </ul>
                                </div>
                                <div class="scrollbutton smallImgDown">&gt;</div>
                            </div><!--smallImg end-->
                            <div id="bigView" style="display:none;"><div><img width="800" height="800" alt="" src="" /></div></div>
                        </div>
                    </div>
                    <div class="Sharing">
                        <div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1441079683326"><a href="#" class="bds_more" data-cmd="more">分享到：</a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
                        <script>
                            window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": { "bdSize": 16 }, "image": { "viewList": ["qzone", "tsina", "tqq", "renren", "weixin"], "viewText": "分享到：", "viewSize": "16" }, "selectShare": { "bdContainerClass": null, "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"] } }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
                        </script>
                        <!--收藏-->
                        <div class="Collect"><a href="javascript:collect(92)"><em class="ico1"></em>收藏商品( 2345 )</a></div>
                    </div>
                </div>
                <!--信息样式-->
                <div class="textInfo">
                    <form class="layui-form" name="ECS_FORMBUY" id="ECS_FORMBUY">
                        <div class="title"><h1>@Model.Good.CityName | @Model.Good.Name | @Model.Good.Weight g </h1><p>@Model.Good.Descible</p></div>
                        <div class="mod_detailInfo_priceSales">
                            <div class="margins">
                                <div class="Price clearfix text_name"><label>价格</label><span class="Prices"><h4>¥@Model.Good.Price</h4> <b>@Model.Good.PrePrice</b></span></div>
                                <div class="Activity clearfix text_name"><label>重量</label><span class="weight">@Model.Good.Weight 克</span></div>
                                <div class="Size clearfix text_name">
                                    <label>规格</label>

                                    <input name="goodId" id="goodId" type="hidden" value="@Model.Good.Id" />
                                    <input name="packId" type="hidden" id="pack_id" value="@(Model.GoodPacks.FirstOrDefault() == null? 0 : Model.GoodPacks.First().Id)" />
                                    @foreach (var goodPack in Model.GoodPacks)
                                    {
                                        <a pack-id="@goodPack.Id" class="pack" href="javascript:void();">@goodPack.Name</a>
                                    }

                                </div>
                                <div class="Sales_volume">
                                    <div class="Sales_info"><h5>销量</h5><b>@Model.Good.Selled</b></div>
                                </div>
                            </div>
                            <div class="s_Review">
                                <a href="#">好评率<b>@(Model.GoodComments.Select(e => e.Level > 3).LongCount() / (Model.GoodComments.Count() == 0 ? 1 : Model.GoodComments.Count()))%</b>[评论<b>@Model.GoodComments.Count()</b>条]</a>
                            </div>
                        </div>
                        <div class="buyinfo" id="detail_buyinfo">
                            <dl>
                                <dt>数量</dt>
                                <dd>
                                    @{

                                        long toatlcount = Model.Good.TotalCount;
                                        long selled = Model.Good.Selled;
                                        long lastCount = toatlcount - selled;
                                    }
                                    <div class="choose-amount left">
                                        @*<a class="btn-reduce" href="javascript:;" onclick="setAmount.reduce('#buy-num')">-</a>
                                        <a class="btn-add" href="javascript:;" onclick="setAmount.add('#buy-num')">+</a>
                                        <input class="text" id="buy-num" value="1" onkeyup="setAmount.modify('#buy-num');" />*@
                                        <input class="text" name="count" type="number" min="1" width="80" max="@lastCount" value="1" id="buy-num" />
                                    </div>
                                    <div class="P_Quantity">剩余：@lastCount 件</div>
                                </dd>
                                <dd>
                                    <div class="wrap_btn">
                                        <a href="javascript:void();" id="addCart" class="wrap_btn1" title="加入购物车"></a>
                                        <a href="javascript:void();" lay-filter="edit" lay-submit="" id="buy_now" class="wrap_btn2" title="立即购买"></a>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                        <div class="Guarantee clearfix">
                            <dl>
                                <dt>商城服务</dt>
                                <dd><em></em>正品保障</dd>
                                <dd><em></em>售后无忧</dd>
                                <dd><em></em>原产认证</dd>
                                <dd class="manner">
                                    <div class="payment " id="payment">
                                        <a href="javascript:void(0);" class="paybtn">支付方式<span class="icon-angle-down"></span></a>
                                        <ul><li>货到付款</li><li>礼品卡支付</li><li>网上支付</li><li>银行转账</li></ul>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--浏览记录-->
        <div class="clearfix">
            <div class="left_style">
                <div class="Records">
                    <div class="title_name">用户浏览记录</div>
                    <ul>
                        <li>
                            <a href="#">
                                <p><img src="~/common/Products/4.jpg" data-bd-imgshare-binded="1" /></p>
                                <p class="p_name">SanmiuSunflower新苗向日葵 乳酪夹心饼干 270g 菲律宾进口</p>
                            </a>
                            <p><span class="p_Price">￥5.30</span><b>10.4</b></p>
                        </li>
                        <li>
                            <a href="#">
                                <p><img src="~/common/Products/5.jpg" data-bd-imgshare-binded="1" /></p>
                                <p class="p_name">商品名称</p>
                            </a>
                            <p><span class="p_Price">￥5.30</span><b>10.4</b></p>
                        </li>
                        <li>
                            <a href="#">
                                <p><img src="~/common/Products/3.jpg" data-bd-imgshare-binded="1" /></p>
                                <p class="p_name">商品名称</p>
                            </a>
                            <p><span class="p_Price">￥5.30</span><b>10.4</b></p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right_style">
                <div class="inDetail_boxOut ">
                    <div class="inDetail_box">
                        <div class="fixed_out ">
                            <ul class="inLeft_btn fixed_bar">
                                <li><a id="property-id" href="#shangpsx" class="current">商品属性</a></li>
                                <li><a id="detail-id" href="#shangpjs">规格与包装</a></li>
                                <li><a id="shot-id" href="#miqsp">售后服务</a></li>
                                <li><a id="coms1-id" href="#coms1">买家评论</a></li>
                            </ul>
                        </div>
                        <!---->
                        <div class="product_details">
                            <div id="shangpsx">
                                <div class="title"><img src="~/common/images/title_name_03.png" /></div>
                                <ul class="shangpsx_info">
                                    <li><label>生产许可证编号</label><span>@Model.GoodAttr.ProNumber</span></li>
                                    <li><label>产品标准号</label><span>GB/T @Model.GoodAttr.ProNumber</span></li>
                                    <li><label>生产日期</label><span>@Model.GoodAttr.ProduceTime</span></li>
                                    <li><label>有效期</label><span>@Model.GoodAttr.ValidTime</span></li>
                                    <li><label>产品名称</label><span>@Model.Good.Name</span></li>
                                    <li><label>净含量</label><span>@Model.Good.Weight g</span></li>
                                    <li><label>包装</label><span>罐装</span></li>
                                    <li><label>品牌</label><span>艺福堂</span></li>
                                    <li><label>食品工艺</label><span>@Model.GoodAttr.ArtDesc</span></li>
                                    <li><label>级别</label><span>@Model.GoodAttr.Level 级</span></li>
                                    <li><label>产地</label><span>中国大陆| @Model.Good.CityName</span></li>
                                    <li><label>价格</label><span>@Model.Good.Price 元</span></li>
                                </ul>
                            </div>
                            <div id="shangpjs">
                                @foreach (var goodImg in Model.GoodImgs)
                                {
                                    <div>
                                        <img width="798" src="http://static.amortal.top/@goodImg.ImgSrc" />
                                    </div>


                                }
                                @*<img width="798" src="~/common/images/pro_img.png" />*@
                            </div>
                            <div id="coms1">
                                <div class="productContent" id="status2">
                                    <div class=""></div>
                                    <div class="iComment clearfix">
                                        <div class="rate">
                                            <strong id="goodRate">100<span>%</span></strong><br />
                                            <span>好评度</span>
                                        </div>
                                        <div class="percent" id="percentRate">
                                            <dl>
                                                <dt>好评<span>(100%)</span></dt>
                                                <dd>
                                                    <div style="width:100px;"></div>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>中评<span>(0%)</span></dt>
                                                <dd class="d1">
                                                    <div style="width:0;"> </div>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>差评<span>(0%)</span></dt>
                                                <dd class="d1">
                                                    <div style="width:0;"> </div>
                                                </dd>
                                            </dl>
                                        </div>
                                        <div class="actor">
                                            <dl>
                                                <dt>
                                                    发表评价即可获得10积分，精华评论更有 <font color="red">额外奖励</font> 积分；<br />
                                                    还有7个多倍积分名额哦，赶紧抢占吧！<br />
                                                    只有购买过该商品的用户才能进行评价。
                                                </dt>
                                            </dl>
                                        </div>
                                    </div>

                                    <div id="ECS_COMMENT">
                                        <div class="Comment">
                                            <div class="CommentTab">
                                                <ul>
                                                    <li class="active" onclick="javascript:gotoPage(1,78,0,0);">全部评论(0)</li>
                                                    <li onclick="javascript:gotoPage(1,78,0,3);">好评(0)</li>
                                                    <li onclick="javascript:gotoPage(1,78,0,2);">中评(0)</li>
                                                    <li onclick="javascript:gotoPage(1,78,0,1);">差评(0)</li>
                                                </ul>
                                            </div>
                                            <div class="" id="goodsdetail_comments_list" style="display:block">
                                                <ul class="clearfix" id="comment">
                                                    <!--评论列表-->
                                                    <li>暂无评论！！！</li>
                                                </ul>
                                                <div class="discuss_Paging">
                                                    <div class="discuss">
                                                        <span class="f_l f6" style="margin-right:10px;">共 <b id="dataCount">0</b> 条评论</span>
                                                        <p id="commentPager_4">
                                                            <a id="start" href="javascript:void();">首页</a>
                                                            <a id="prev" class="prev" href="javascript:;">上一页</a>
                                                            <font id="page">
                                                                <a href="javascript:;"><font id="pageIndex">1</font>/<font id="pageCount">60</font></a>
                                                            </font>
                                                            <a id="next" class="next" href="javascript:;">下一页</a>
                                                            <a id="end" class="last" href="javascript:;">尾页</a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <script type="text/javascript">
                                        $('.CommentTab ul').find('li').click(function () {
                                            $('.CommentTab ul').find('li').removeClass('active');
                                            $('.CommentText').css({ display: 'none' });
                                            $(this).addClass('active');
                                            $('.CommentText').eq($(this).index()).css({ display: 'block' });
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--友情链接-->
        <div class="Links">
            <div class="link_title">友情链接</div>
            <div class="link_address">
                <a href="http://www.jjcyxh.com/">九江市茶叶产业协会</a>  <a href="http://www.ctma.com.cn/index.html">中国茶叶流通协会</a>  <a href="http://www.jxcxh.com.cn/">江西省茶叶协会</a>
                <a href="http://www.gzcx.org/" target="_blank">贵州省茶叶协会</a><a href="http://www.gdtea.com.cn/" target="_blank">广东省茶业行业协会</a><a href="http://www.zjcxw.com.cn/" target="_blank">浙江省茶叶产业协会</a><a href="http://www.hncha.cn/" target="_blank">湖南省茶业协会</a>
            </div>
        </div>
    </div>


@section FooterScript{
    <script src="~/common/Threelinkage/layui/layui.all.js"></script>
    <script id="test1" type="text/html">
        {{each comments as value i}}
        <div class="layui-row comment_div">
            <div class="layui-row">
                <div class="layui-col-lg3">
                    <li>
                        <img src='@("http://static.amortal.top/"){{value.userImgSrc}}' style="width:20px;height:20px;border-radius:10px" />
                        {{value.userName}}
                    </li>
                </div>
                <div class="layui-col-lg2 layui-col-lg-offset1">
                    <%for(var i = 0; i < value.level; i++) {%>

                    <li class="layui-col-lg1"><span class="layui-icon yellow">&#xe658;</span></li>
                    <%}%>

                </div>
            </div>
            <br />
            <div class="layui-row layui-col-lg-offset1">
                <li class="layui-col-lg2">
                    <img src="{{if value.commentImgSrc!=''}}
                                     @(" http://static.amortal.top/"){{value.commentImgSrc}}
                {{/if}}" height="70px" width="70" />
                </li>
                <li class="layui-col-lg6">{{value.content}}</li>
                {{each orderRecords as order i}}
                <li class="layui-col-lg2">{{order.packName}}</li>
                {{/each}}
            </div>

        </div>
        {{/each}}
    </script>
    <script type="text/javascript">

        $(function () {


            $(".pack").first().addClass("pack-active");
            $(".pack").click(function () {
                $(".pack").removeClass("pack-active");
                $(this).addClass("pack-active");
                var pack_id = $(this).attr("pack-id");
                $("#pack_id").val(pack_id);
            });
            //添加到购物车
            $('#addCart').click(function () {
                var json = $('#ECS_FORMBUY').serialize();
                $.ajax({
                    url: "/Cart/AddCart",
                    data: json,
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.status == "ok") {
                            layer.msg("添加购物车成功", { icon: 1, time: 1000 });
                        } else if (res.status = "error") {
                            layer.msg("添加购物车失败" + res.errorMsg, { icon: 2, time: 1000 });
                        } else if (res.status = "redirect") {
                            location.href = res.data;
                        } else {
                            layer.msg("添加购物车失败", { icon: 2, time: 1000 });
                        }
                    },
                    error: function () {
                        layer.msg("网络错误", { iocn: 2, time: 1000 });
                    }
                });
            });

            //加载评论
            function LoadComment(index) {
                if (index > parseInt($('#pageCount').html()) || index < 1) {
                    return false;
                }
                var goodId = $('#goodId').val();
                $.ajax({
                    url: "/Home/GetGoodComment",
                    type: "post",
                    data: { index: index, goodId: goodId },
                    dataType: "json",
                    success: function (res) {
                        if (res.status == "ok") {
                            console.log(res.data);
                            var html = template('test1', res.data);
                            console.log(html);
                            $('#comment').children().remove();
                            $('#comment').append(html);     //评论
                            $('#pageIndex').html(res.data.pageIndex);
                            $('#pageCount').html(res.data.pageCount);
                            $('#dataCount').html(res.data.dataCount);
                        } else if (res.status = "no") {

                        } else if (res.status = "error") {
                            layer.msg("加载评论出错：错误信息" + res.errorMsg, { icon: 2, time: 1000 });
                        } else {
                            layer.msg("加载评论出错", { icon: 2, time: 1000 });
                        }
                    }, error: function () {
                        layer.msg("网络错误", { icon: 2, time: 1000 });
                    }
                });
            }

            LoadComment(1);
            //第一页
            $('#start').click(function () {
                LoadComment(1);
            });
            //最后一页
            $('#end').click(function () {
                LoadComment($('#pageCount').html());
            });
            //上一页
            $('#prev').click(function () {
                var index = parseInt($('#pageIndex').html());
                index = index + 1;
                LoadComment(index);
            });
            //下一页
            $('#next').click(function () {
                var index = parseInt($('#pageIndex').html());
                index = index - 1;
                LoadComment(index);
            });
        });


        layui.config({
            base: "js/"
        }).use(['form', 'layer', 'jquery', 'layedit'], function () {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : parent.layer,
                laypage = layui.laypage,
                layedit = layui.layedit;


            //此处的addNew是38行代码中提交按钮的 lay-filter属性
            form.on("submit(edit)", function (data) {

                var index = top.layer.msg('数据提交中，请稍候', { icon: 16, time: false, shade: 0.8 });

                var formData = $(".layui-form").serialize();    //表单数据

                $.ajax({
                    url: "/Order/BuyNow",
                    type: "POST",
                    dataType: "json",
                    data: formData,
                    success: function (res) {
                        if (res.status == "ok") {
                            layer.msg("即将跳转到订单页面...", {
                                icon: 1, time: 1000, end: function () {
                                    layer.close(index);

                                    location.href = "/Order/Detailed?orderId=" + res.data;
                                }
                            });

                        } else if (res.status == "redirect") {
                            layer.msg(res.errorMsg, {
                                icon: 5, time: 2000, end: function () {
                                    layer.close(index);
                                    location.href = res.data;
                                }
                            });
                        } else {
                            layer.msg("购买失败:" + res.errorMsg, {
                                icon: 5, time: 2000, end: function () {
                                    layer.close(index);
                                }
                            });
                        }
                    },
                    error: function () {
                        layer.msg("网络请求失败", {
                            icon: 5, time: 2000, end: function () {
                                layer.close(index);

                                //刷新父页面
                                //location.reload();
                            }
                        });
                    }
                });
                return false;
            })
        })

    </script>
}